import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useMediaQuery, Divider, CircularProgress, Button } from '@material-ui/core';
import { Topbar, Footer, Sidebar, RootPlays } from './components';
import { setCallbackError } from 'redux/actions/LoadingActions';
import { useSelector, useDispatch } from 'react-redux'

import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import { useLocation } from 'react-router-dom/cjs/react-router-dom.min';

const useStyles = makeStyles(theme => ({
  root: {
    position: 'relative',
    height: '100%',
  },
  progressContainer: {
    position: 'fixed',
    left: 0,
    top: 0,
    backgroundColor: 'rgba(52, 52, 52, 0.8)',
    width: '100%',
    height: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1000000
  },
}));

const Main = ({ children, themeToggler, themeMode }) => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const location = useLocation();

  const loading = useSelector((state) => state.loading.isLoading);
  const callbackError = useSelector((state) => state.loading.callbackError);

  const theme = useTheme();
  const isMd = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true,
  });

  const pages = {
    landings: {
      title: 'Landings',
      id: 'landing-pages',
      children: {
        services: {
          groupTitle: 'Services',
          pages: [
            {
              title: 'Publication',
              href: '/publication',
            },
            {
              title: 'Community',
              href: '/community',
            },
            {
              title: 'Artists',
              href: '/artists',
            },
            {
              title: 'Podcasts',
              href: '/podcasts',
            },
            {
              title: 'Members',
              href: '/members',
            },
            {
              title: 'Vote',
              href: '/voting',
            },
            {
              title: 'Shop',
              href: 'https://www.crowdedstreaming.com/shop',
            },
          ],
        },
        apps: {
          groupTitle: 'Apps',
          pages: [
            {
              title: 'Mobile App',
              href: '/mobile-app',
            },
          ],
        },
      },
    },

    pages: {
      title: 'Pages',
      id: 'supported-pages',
      children: {
        helpCenter: {
          groupTitle: 'Help center',
          pages: [
            {
              title: 'Overview',
              href: '/help-center',
            },
            {
              title: 'Article',
              href: '/help-center-article',
            },
          ],
        },
        company: {
          groupTitle: 'Company',
          pages: [
            {
              title: 'About',
              href: '/about',
            },
            {
              title: 'About (Cover)',
              href: '/about-side-cover',
            },
            {
              title: 'Pricing',
              href: '/pricing',
            },
            {
              title: 'Terms',
              href: '/company-terms',
            },
          ],
        },
        blog: {
          groupTitle: 'Blog',
          pages: [
            {
              title: 'Newsroom',
              href: '/blog-newsroom',
            },
            {
              title: 'Reach View',
              href: '/blog-reach-view',
            },
            {
              title: 'Search',
              href: '/blog-search',
            },
            {
              title: 'Article',
              href: '/blog-article',
            },
          ],
        },
      },
    },

    profile: {
      title: 'Profile',
      id: 'profile',
      children: {
        settings: {
          groupTitle: 'Settings',
          pages: [
            {
              title: 'General',
              href: '/account/?pid=general',
            },
            {
              title: 'Subscriptions',
              href: '/account/?pid=subscriptions',
            },
            {
              title: 'My Playlists',
              href: '/account/edit_playlist',
            },
            {
              title: 'My Profile',
              href: '/account/my_profile',
            },
          ],
        },
        security: {
          groupTitle: 'Security',
          pages: [
            {
              title: 'Password reset',
              href: '/account/?pid=security',
            },
            {
              title: 'Logout',
              href: '/signup-cover',
            },
          ],
        }
      }
    },

    about: {
      title: 'About',
      id: 'about',
      children: {
        about: {
          groupTitle: 'About',
          pages: [
            {
              title: 'Terms of Use',
              href: '/terms',
            },
            {
              title: 'Privacy Policy',
              href: '/privacy',
            },
            {
              title: 'Artist Portal',
              href: '/artist_portal',
            },
          ],
        },
      },
    },

    support: {
      title: 'Support',
      id: 'support',
      children: {
        support: {
          groupTitle: 'Support',
          pages: [
            {
              title: 'FAQ',
              href: '/faq',
            },
            {
              title: 'Contact Us',
              href: '/contact',
            },
          ],
        },
      },
    },
  };

  const [openSidebar, setOpenSidebar] = useState(false);

  const handleSidebarOpen = () => {
    setOpenSidebar(true);
  };

  const handleSidebarClose = () => {
    setOpenSidebar(false);
  };

  const handleCloseDialog = () => {
    dispatch(setCallbackError(''));
  };

  const open = isMd ? false : openSidebar;

  // const isHiddenTopBar = ["edit_playlist"]

  // const hiddenTopBar = () => {
  //   return isHiddenTopBar.some(item => item == location.pathname.split("/")[2]
  //   )
  // }

  return (
    <div
      className={clsx({
        [classes.root]: true,
      })}
    >
      <Topbar onSidebarOpen={handleSidebarOpen} pages={pages} themeMode={themeMode} themeToggler={themeToggler} />

      <Sidebar
        onClose={handleSidebarClose}
        open={open}
        variant="temporary"
        pages={pages}
      />
      <main style={{ overflow: "hidden" }}>
        <Divider />
        {children}
      </main>
      <Footer pages={pages} />
      <RootPlays pages={pages} />
      {loading && (
        <div className={classes.progressContainer}>
          <CircularProgress color="secondary" />
        </div>
      )}
      <Dialog
        open={callbackError ? true : false}
        fullWidth
        maxWidth="sm"
        onClose={e => handleCloseDialog()}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        style={{ zIndex: 100000 }}
      >
        <DialogTitle id="alert-dialog-title">
          {(typeof callbackError === 'object' && callbackError !== null) ? callbackError.title : 'Error Occurred'}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {(typeof callbackError === 'object' && callbackError !== null) ? callbackError.content : callbackError}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          {/* <Button onClick={handleClose} color="primary">
            Disagree
          </Button> */}
          <Button onClick={e => handleCloseDialog()} color="primary" autoFocus>
            OK
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

Main.propTypes = {
  children: PropTypes.node,
  themeToggler: PropTypes.func.isRequired,
  themeMode: PropTypes.string.isRequired,
};

export default Main;
